<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style>
        body {
            background-color: #f8f9fa;
        }

        .form-container {
            max-width: 400px;
            margin: 50px auto;
            padding: 20px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        #liveAlertPlaceholder {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
            width: 100%;
            max-width: 400px;
        }

    </style>
</head>
<body>
<%
    String errorCode = request.getParameter("errorCode");
%>
<div id="liveAlertPlaceholder" class="container text-center col-3"></div>

<div class="container" style="margin-top: 13rem;">
    <div class="form-container">
        <h2 class="text-center mb-4">用户登录</h2>
        <form id="loginForm">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" class="form-control" id="username" placeholder="请输入用户名" required>
                <small id="usernameHelp" class="form-text text-danger"></small>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" class="form-control" id="password" placeholder="请输入密码" required>
                <small id="passwordHelp" class="form-text text-danger"></small>
            </div>
            
            <!-- 添加间距的div -->
            <div class="mb-3"></div>
            
            <button type="button" class="btn btn-primary w-100" onclick="doloign()" id="login-button">登录</button>
            <p class="mt-3 text-center">
                还没有账号？<a href="register.jsp">立即注册</a><br>
                忘记密码？<a href="forget.jsp">找回密码</a>
            </p>
        </form>
    </div>

</div>

</body>
<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./bootstrap5/bootstrap.min.js"></script>
<script src="API.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const errorCode = "<%= errorCode %>";
        if (errorCode==1) {
            appendAlert("请进行登录");
        }else if(errorCode==2){
            appendAlert("权限不足请切换账号");
        }
        // 打印到控制台

    });

    const vc=document.getElementById("Vcode");
    let username;
    let password;

    // 动态监测username和password的变化
    $(document).ready(function () {
        // 监听username输入框的变化
        $('#username').on('input', function () {
            username = $(this).val();

        });

        // 监听password输入框的变化
        $('#password').on('input', function () {
            password = $(this).val();

        });



    });



    async function doloign() {
        if (username == null || password == null) {
            appendAlert("请输入用户名和密码")
            return;
        }
        try {
            const reqCode = await getUserInfo(username, password);

                if (reqCode == 201) {
                    appendAlert("登录成功")
                    window.location.href = "MainPage/functionPage/index.jsp";
                }else if(reqCode==200){
                    window.location.href = "MainPage/managePage/Management.jsp";
                }
                else  if(reqCode==401){
                    appendAlert("用户名或密码错误");
                }else if(reqCode==400){
                    appendAlert("用户不存在");
                }

        } catch (error) {
            console.error(error);
        }
    }



    // 调用示例


    const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
    const appendAlert = function (s) {
        // 先清空之前的警告
        alertPlaceholder.innerHTML = '';
        var yu = s
        const wrapper = document.createElement('div')
        wrapper.innerHTML = [
            `<div class="alert alert-danger alert-dismissible fade show" role="alert">`,
            `   <div>` + yu + `</div>`,
            '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
            '</div>'
        ].join('')

        alertPlaceholder.append(wrapper)

        // 5秒后自动关闭
        setTimeout(() => {
            // 使用Bootstrap的alert API来关闭，确保动画效果
            const alertNode = wrapper.querySelector('.alert');
            if (alertNode) {
                const bsAlert = new bootstrap.Alert(alertNode);
                bsAlert.close();
            }
        }, 5000);
    }

</script>
</html>
